<template>
	
	 <!-- <view class="topicNav">
		  <view class="u-f u-f-ac u-f-jsb">
		  	<text>热们分类 </text>
			<text> 更多</text>
		  </view>
		  
		  <view class="u-f-ac  u-f-ajc   u-f-jsb hotCategory">
			  <text>最新</text>
			  <text>好看</text>
			  <text>好牛逼</text>
			  <text>新疆</text>
			  <text> 防闺蜜 </text>
		  </view>
	  	
	  </view> -->
	  
	  
	  <view class="topic-nav">
	  	<view class="u-f-ac u-f-jsb">
	  		<view>热门分类</view>
	  		<view class="u-f-ac"  @tap="openTopicNav">
	  			更多<view class="icon iconfont icon-jinru"></view>
	  		</view>
	  	</view>
	  	<view class="u-f-ac">
	  		<block v-for="(item,index) in nav" :key="index">
	  			<view class="u-f-ajc">{{item.name}}</view>
	  		</block>
	  	</view>
	  </view>
	    
</template>

<script>
	
	
	export  default {
		
		props:{
			nav:Array
		},
		methods:{
			openTopicNav() {
				
			}
		}
	}
</script>

<style scoped>
	
	/* 	
	.hotCategory {
	     
	
	}
	
	.hotCategory text  {
		width: 15%;
		height: 30px;
		border-radius: 10px;
		border:  1px solid #ccc;
		padding: 4px;
		line-height: 30px;
		text-align: center;
		background-color: #ccc;
		
		
	} */
	
	
	
	.topic-nav{
		border-bottom: 1upx solid #EEEEEE;
		border-top: 1upx solid #EEEEEE;
		padding: 20upx;
	}
	.topic-nav>view:first-child{
		margin-bottom: 10upx;
	}
	.topic-nav>view:first-child view{
		color: #9E9E9E;
	}
	.topic-nav>view:first-child>view:first-child{
		color: #333333;
		font-size: 32upx;
	}
	.topic-nav>view:last-child>view{
		flex: 1;
		background: #dddddd;
		color: #9E9E9E;
		border-radius: 10upx;
		margin: 0 10upx;
	}
	
	
</style>
